<template>
  <div id="container2" style="width: 250px; height: 285px;"></div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, reactive } from 'vue';
import * as echarts from 'echarts/core';
import axios from 'axios';

onMounted(() => {
  let dom = document.getElementById('container2');
  let data = reactive({});
  let getRate = function() {
    axios.get("http://localhost:7000/service-nepm/administrator/getOtherMesg").then(res => {
      data.value = res.data;
      console.log(data.value);
      updateChart(data.value.big_city_cover);
    });
  };

  getRate();

  let myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });

  let option = {
    title: {
      text: '-- 全国大城市网格覆盖率(%) --',
      left: 'center',
      top: 'top',
      textStyle: {
        fontSize: 14,
        color: '#E4FFFF'
      }
    },
    series: [
      {
        name: 'Pressure',
        type: 'gauge',
        progress: {
          show: true,
          width: 8,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#58D9F9' },
              { offset: 1, color: '#F74874' }
            ])
          }
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}%',
          fontSize: 20,
          offsetCenter: [0, '70%'],
          color: '#fff'
        },
        axisLabel: {
          fontSize: 10,
          distance: 25,
          color: '#fff'
        },
        title: {
          fontSize: 10,
          color: '#fff'
        },
        pointer: {
          width: 3,
          itemStyle: {
            color: '#a8e063'
          }
        },
        data: [
          {
            value: 0,
            fontSize: 5,
            color: '#fff'
          }
        ],
        axisLine: {
          lineStyle: {
            width: 8
          }
        },
        axisTick: {
          show: true,
          length: 5,
          lineStyle: {
            color: '#fff',
            width: 1
          }
        },
        splitLine: {
          show: true,
          length: 10,
          lineStyle: {
            color: '#fff',
            width: 2
          }
        }
      }
    ]
  };

  const updateChart = (newValue) => {
    myChart.setOption({
      series: [
        {
          data: [
            {
              value: parseFloat(newValue).toFixed(2)
            }
          ],
          detail: {
            formatter: `{value}%`,
            color: '#fff'
          }
        }
      ]
    });
  };

  myChart.setOption(option);

  onBeforeUnmount(() => {
    myChart.dispose();
  });
});
</script>

<style scoped>
#container2 {
  width: 70%;
  height: 70%;
  max-width: 600px;
  max-height: 400px;
  margin: 0;
}
</style>
